<template>
  <div class="container article-list">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state" style="text-align: center; padding: 40px">
      <div style="font-size: 32px; color: #409eff">加载中...</div>
      <p style="margin-top: 16px; color: #666">正在加载文章...</p>
    </div>

    <!-- 文章列表 -->
    <div v-else class="row g-4">
      <div v-for="(article, index) in articleList" :key="'article' + index" class="col-12">
        <router-link class="article-item" :to="`/article_detail?id=${+(article.id ?? 0)}`">
          <div class="article-thumb">
            <img
              v-if="(article.thumbnail?.trim().length ?? 0) > 0"
              :src="article.thumbnail"
              :alt="article.title"
            />
            <img v-else src="@/assets/images/zhanwei.jpg" :alt="article.title" />
          </div>
          <div class="article-main">
            <div class="article-header">
              <h2 class="article-title">
                {{ article.title }}
              </h2>
            </div>

            <div class="article-content">
              <p class="article-summary">
                {{
                  article.summary || "这是一篇关于技术分享的优质文章，包含详细的实例和最佳实践..."
                }}
              </p>
            </div>

            <div class="article-tags">
              <el-tag v-if="article.categoryName" type="primary">
                {{ article.categoryName }}
              </el-tag>
              <el-tag v-if="article.isTop === '1'" type="success">置顶</el-tag>
              <el-tag type="info">原创</el-tag>
            </div>

            <div class="article-meta-footer">
              <div class="meta-item">
                <i class="fa fa-user"></i>
                {{ article.updatedName }}
                发表于 {{ formatDateUnique(article.createTime) }}
                <!--                日历图标-->
                <i
                  class="fa fa-calendar"
                  style="margin-left: 5px; color: #0d6efd; margin-top: -2px"
                ></i>
              </div>
              <div class="meta-item">
                <i class="fa fa-eye"></i>
                {{ article.viewCount }} 阅读
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <pagination
      v-if="(total ?? 0) > 0"
      v-model:total="total"
      v-model:page="pageRequest.pageNum"
      v-model:limit="pageRequest.pageSize"
    />
  </div>
</template>

<script lang="ts" setup>
import ArticleApi, { LzArticlePageVO } from "@/api/content/lz-article";
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import { formatDateUnique } from "@/utils/formatterUtils";
import { useArticleStore } from "@/store/modules/article";

const articleStore = useArticleStore();
const route = useRoute();
const pageRequest = ref<any>({
  pageNum: 1,
  pageSize: 10,
  categoryId: undefined,
  title: undefined,
});

// 初始化分类ID
if (route.query.classId) {
  pageRequest.value.categoryId = +route.query.classId;
}

const total = ref(0);
const loading = ref(false);
const articleList = ref<Array<LzArticlePageVO>>([]);

const fetchArticles = async () => {
  try {
    loading.value = true;
    console.log("开始获取文章，请求参数:", pageRequest.value);
    const res = await ArticleApi.getPage(pageRequest.value);
    console.log("获取到的文章数据:", res);
    articleList.value = res.list;
    total.value = res.total;
    console.log("文章列表长度:", articleList.value.length, "总数:", total.value);
  } catch (error) {
    console.error("Failed to fetch articles:", error);
    articleList.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

// 监听路由变化，特别是分类ID的变化
watch(
  () => route.query.classId,
  (newClassId) => {
    pageRequest.value.categoryId = newClassId ? +newClassId : undefined;
    pageRequest.value.pageNum = 1; // 重置页码
    fetchArticles();
  },
  { immediate: true }
);

// 监听搜索值变化
watch(
  () => articleStore.searchValue,
  (newSearchValue) => {
    pageRequest.value.title = newSearchValue;
    pageRequest.value.pageNum = 1; // 重置页码
    fetchArticles();
  }
);

// 监听分页变化
watch(
  () => [pageRequest.value.pageNum, pageRequest.value.pageSize],
  () => {
    fetchArticles();
  }
);
</script>

<style lang="scss" scoped>
.article-list {
  padding: 20px 0;

  @media (max-width: 768px) {
    padding: 10px;
  }

  .article-item {
    cursor: pointer;
    padding: 20px 24px;
    display: flex;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    text-decoration: none; // 移除链接下划线

    @media (max-width: 768px) {
      flex-direction: column; // 小屏幕改为垂直布局
      padding: 15px;
      margin-bottom: 15px;
    }

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

      .article-thumb img {
        transform: scale(1.05);
      }

      .article-title {
        color: #1890ff;
      }
    }
  }

  .article-thumb {
    flex: 0 0 200px;
    height: 140px;
    overflow: hidden;
    border-radius: 8px;
    margin-right: 20px;

    @media (max-width: 768px) {
      flex: none;
      width: 100%;
      height: 180px;
      margin-right: 0;
      margin-bottom: 15px;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
  }

  .article-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media (max-width: 768px) {
      margin-left: 0;
    }
  }

  .article-header {
    //margin-bottom: 12px;
  }

  .article-title {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    color: #262626;
    transition: color 0.3s;

    @media (max-width: 768px) {
      font-size: 16px;
      margin-bottom: 10px;
    }
  }

  .article-content {
    //flex: 1;
  }

  .article-summary {
    color: #595959;
    font-size: 14px;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 15px;

    @media (max-width: 768px) {
      font-size: 13px;
      -webkit-line-clamp: 2;
      margin-bottom: 12px;
    }
  }

  .article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
  }

  .article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;

    .el-tag {
      margin: 0;
      font-size: 12px;
      padding: 0 8px;
      height: 24px;
      line-height: 24px;
      border-radius: 4px;
      background: #f5f5f5;
      border-color: transparent;
      color: #8c8c8c;

      @media (max-width: 768px) {
        font-size: 11px;
        height: 22px;
        line-height: 22px;
      }

      &:hover {
        color: #1890ff;
        background: #e6f7ff;
      }
    }
  }

  .article-meta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    @media (max-width: 768px) {
      font-size: 12px;
    }

    .meta-item {
      display: inline-flex;
      align-items: center;
      color: #8c8c8c;
      font-size: 13px;

      @media (max-width: 768px) {
        font-size: 12px;
      }

      i {
        margin-right: 4px;
        font-size: 14px;

        @media (max-width: 768px) {
          font-size: 12px;
        }

        &.fa-calendar {
          margin-left: 8px;
          color: #1890ff;
        }
      }
    }
  }
}

// 分页器样式
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;

  @media (max-width: 768px) {
    margin-top: 20px;
  }
}
</style>
